<template>
    <view class="shop-login box pd-v-72 flex flex-ver flex-j-center flex-center position-r">
      <u-navbar
          :autoBack="true"
          bgColor="rgba(0,0,0,0)"
          :titleStyle="{color:'#fff'}"
      >
      </u-navbar>
  
      <image class="" src="@/static/logo.png" style="width:152rpx" mode="widthFix" />
  
      <view class="mr-t-24 font44 lh-60 bold color-default">
          鸽充充
      </view>
  
      <view class="mr-t-14 font30 lh-42 color-info">
          行驶保驾护航，充电轻松安心
      </view>
      
  
      <view class="full-w box mr-t-100">
          
          <view>
              <u--form
                  :model="form"
                  :rules="rules"
                  ref="uForm"
              >
                  <u-form-item
                      prop="username"
                  >
                      <u--input
                          v-model="form.username"
                          border="none"
                          shape="circle"
                          :customStyle="{backgroundColor:'#F5F5F5',height:'108rpx',padding:'0 40rpx'}"
                          placeholder="请输入登录账号"
                      ></u--input>
                  </u-form-item>
                  <u-form-item
                      class="mr-t-32"
                      prop="password"
                  >
                      <u--input
                          v-model="form.password"
                          border="none"
                          shape="circle"
                          :customStyle="{backgroundColor:'#F5F5F5',height:'108rpx',padding:'0 40rpx'}"
                          type="password"
                          placeholder="请输入登录密码"
                      ></u--input>
                  </u-form-item>
              </u--form>
          </view>
            
        
          <view class="full-w box mr-t-60 pd-v-40">
              <u-button type="primary" :customStyle="{height:'88rpx'}" shape="circle" color="#35BE65" @click="login"  text="登录"></u-button>
          </view>
      </view>
  
      <view class="mr-t-36 flex flex-center" @click="checkChange">
          <view class="mr-r-12 pd-h-10" >
             <radio :checked="isCheck" style="transform:scale(0.8);"></radio>
              <!-- <u-icon :name="isCheck ? 'checkmark-circle-fill' : 'checkmark-circle'" :color="isCheck ? '#3AC981' : '#666'" size="20" ></u-icon> -->
          </view>
            
          <view class="font24 lh-34 color-default">
              记住账号密码
          </view>
            
      </view>
  
      <view class="shop-login__footer txt-center pd-v-72 font28 lh-40 color-note position-a">
          商户端说明：仅支持本公司商户登录，方便商户查询充电桩数据
      </view>
        
        
        
     
        
        
    </view>
  </template>
  
  <script setup>
  
  import { useStore } from '@/store/index.js';
  import { merchantLogin } from "@/api/proxy";
  
  
  import { computed, ref, onMounted, reactive } from "vue";
  import { onReady, onLoad } from '@dcloudio/uni-app';
  
  const store = useStore();
  
  const isCheck = ref(false)
  const form = ref({
      username: '',
      password: '',
  });
  const uForm = ref(null);
  const rules = ref({
      username: [
          {
              required: true,
              message: '请输入登录账号',
              trigger: 'blur',
          }
      ],
      password: [
          {
              required: true,
              message: '请输入登录密码',
              trigger: 'blur'
          }
      ]
  })
  
  onReady(() => {
      console.log(uForm.value)
      uForm.value.setRules(rules.value)
  });
  
  onLoad(() => {
      if(uni.getStorageSync('rememberShop')) {
          form.value = uni.getStorageSync('rememberShop')
          isCheck.value = true
      }
  });
  
  const checkChange = () => {
      isCheck.value = !isCheck.value
  }
  
  const login = () => {
      uForm.value.validate().then(res => {
          if(res) {
            uni.login({
                provider: 'weixin',
                success: (loginRes) => {
                    uni.showLoading({
                        title: '登录中...',
                        mask: true
                    });
        
                    merchantLogin({
                        username: form.value.username,
                        password: form.value.password,
                        code: loginRes.code
                    }).then(res => {
                        uni.hideLoading()
                        console.log(res)
                        if(res.code == 200) {
                            if(isCheck.value) {
                                uni.setStorageSync('rememberShop', {
                                    username: form.value.username,
                                    password: form.value.password
                                })
                            } else {
                                uni.removeStorageSync('rememberShop')
                            }
                            store.user.SET_USERINFO2(res.data)
                            store.user.SET_TOKEN2(res.data.token)
                            uni.setStorageSync('token2', res.data.token)
                            uni.setStorageSync('userInfo2', res.data)
                            uni.showToast({
                                title: '登录成功',
                                icon: 'success',
                                duration: 2000,
                                success: () => {
                                    uni.reLaunch({
                                        url: '/sub_shop/pages/index/index'
                                    })
                                }
                            });
                            
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    }).catch(err => {
                        uni.hideLoading()
                        uni.showToast({
                            title: '登录失败',
                            icon: 'none',
                            duration: 2000
                        });
                    })
                }
            })
              
          }
      }).catch(err => {
          console.log(err)
      })
  }
  
  </script>
  
  <style lang="scss" scoped>
  .shop-login {
      height:100vh;
      
  
      .shop-login__footer  {
          left:0;
          bottom:68rpx;
      }
  }
  </style>
  